<template>
  <div v-if="!isListVisible">
    <!-- 联络任务查询 -->
    <div style="height: 50px;">
      <div class="message">
        <el-radio></el-radio>联络任务查询
      </div>
      <!-- 当前展会 -->
      <div class="exhibition">当前展会:
        <el-text v-model="state.dataForm.exhsNameStr">{{ state.dataForm.exhsNameStr }} </el-text>
        <el-text class="mx-1" type="primary" style="padding-left: 20px;cursor: pointer;" @click="handlexhibition()">切换</el-text>
        <Sort style="width: 1em; height: 1em; margin-left: 10px;transform: rotate(270deg);color:#17B3A3;margin-bottom:-2px" />
      </div>
    </div>
    <el-form ref="vForm" :model="state.dataForm" @keyup.enter="state.getDataList()" label-width="85px">
      <el-form-item label="联络任务" style="margin-left: 30px;">
        <el-checkbox @change="handleCheckAllChange">全选</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-checkbox-group class="select" v-model="state.tskIdArr">
          <el-checkbox v-for="item in taskleader" :key="item.id" :label="item.id" :value="item.id">
            {{ item.tskName }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-row style="margin-left: 30px;">
        <el-form-item label="操作人员">
          <el-select v-model="state.dataForm.sftId" placeholder="请选择">
            <el-option v-for="item in operatorList" :key="item.userId" :label="item.realName" :value="item.userId">
              {{ item.realName }}
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row style="margin-left: 30px;">
        <el-form-item label="联络结果">
          <ren-select v-model="state.dataForm.linkResult" dict-type="contact-results" placeholder="请选择"></ren-select>
        </el-form-item>
      </el-row>
      <!-- 已联络 -->
      <div v-if="state.dataForm.linkResult == 'telephone_contacted'">
        <el-row style="margin-left: 30px;">
          <el-form-item>
            <ren-checkbox-group v-model="state.dataForm.linkResult" dict-type="telephone_contacted"
              placeholder="请选择"></ren-checkbox-group>
          </el-form-item>
        </el-row>
      </div>
      <!-- 未联络 -->
      <div v-if="state.dataForm.linkResult == '未联络'">
        <el-row style="margin-left: 30px;">
          <el-form-item>
            <ren-checkbox-group v-model="state.dataForm.linkResult" placeholder="请选择"></ren-checkbox-group>
          </el-form-item>
        </el-row>
      </div>
      <!-- 待联络 -->
      <div v-if="state.dataForm.linkResult == 'wait_contact'">
        <el-row style="margin-left: 30px;">
          <el-form-item>
            <ren-checkbox-group v-model="state.dataForm.linkResult" dict-type="wait_contact"
              placeholder="请选择"></ren-checkbox-group>
          </el-form-item>
        </el-row>
      </div>
      <!-- 不联络 -->
      <div v-if="state.dataForm.linkResult == 'no_contact'">
        <el-row style="margin-left: 30px;">
          <el-form-item>
            <ren-checkbox-group v-model="state.dataForm.linkResult" dict-type="no_contact"
              placeholder="请选择"></ren-checkbox-group>
          </el-form-item>
        </el-row>
      </div>
      <!-- 失败 -->
      <div v-if="state.dataForm.linkResult == 'telephone_fail'">
        <el-row style="margin-left: 30px;">
          <el-form-item>
            <ren-checkbox-group v-model="state.dataForm.linkResult" dict-type="telephone_fail"
              placeholder="请选择"></ren-checkbox-group>
          </el-form-item>
        </el-row>
      </div>
      <el-row style="margin-left: 30px;">
        <el-form-item label="联络时间">
          <el-date-picker v-model="state.daterange" type="daterange" value-format="YYYY-MM-DD" :range-separator="$t('datePicker.range')" :start-placeholder="$t('datePicker.start')" :end-placeholder="$t('datePicker.end')"> </el-date-picker>
        </el-form-item>
      </el-row>
      <el-row style="margin-left: 30px;">
        <el-form-item label="联络时长">
          <el-input v-model="state.dataForm.linkMinTime" type="text" placeholder="请输入"></el-input>
        </el-form-item>
        <el-text style="font-size:16px;margin-top:-30px;padding: 10px 10px "> __</el-text>
        <el-form-item label-width="0px">
          <el-input v-model="state.dataForm.linkMaxTime" type="text" placeholder="请输入"></el-input>
        </el-form-item>
        <el-text style="font-size:16px;margin-top:-20px;padding: 10px 10px ">秒</el-text>
      </el-row>
      <el-row style="margin-left: 30px;">
        <el-col>
          <el-form-item>
            <el-checkbox v-model="state.dataForm.dataBox" label="人员数据筐" name="type"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-left: 30px;margin-top: 30px;">
        <el-col>
          <el-form-item>
            <el-button type="primary" :disabled="state.tskIdArr.length === 0" @click="baseQuery()">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
   <!-- 当前展会弹窗 -->
   <exhibition ref="currentExhibition" @refreshDataList="getInfo" @refreshexhibitionlist="getresultleader"></exhibition>
  <!-- 查询列表 -->
  <div v-if="isListVisible" style="margin: 0;background:#fff"  class="unselectable" >
    <el-form label-position="left" label-width="82px" :inline="true" :model="state.dataForm"
      @keyup.enter="state.getDataList()">
      <el-row>
        <el-col :span="6.5">
          <el-form-item label="个人收藏：">
            <el-select placeholder="请选择" v-model="state.dataForm.dfvId">
              <el-option v-for="role in collectList" :key="role.id" :label="role.dfvName" :value="role.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-form-item>
            <el-button @click="collectAdd()" :disabled="state.multiple">加入</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="collectDelete()" :disabled="state.multiple">移除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" style="margin-left:20px" @click="handleFavorite()">新建收藏夹</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="操作类型：">
            <ren-radio-group v-model="state.dataForm2.type" dict-type="Operation-type" style="width: 320px;">
            </ren-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0">
            <ren-select v-if="state.dataForm2.type==0" v-model="state.dataForm2.field" dict-type="dict_class" placeholder="请选择"></ren-select>
            <ren-select v-if="state.dataForm2.type==1" v-model="state.dataForm2.field" dict-type="category" placeholder="请选择"></ren-select>
            <ren-select v-if="state.dataForm2.type==2" v-model="state.dataForm2.field" dict-type="dict_class" placeholder="请选择"></ren-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="为" label-width="30px" style="margin-left: 10px;">
            <ren-select  v-if="state.dataForm2.field=='person_level'" v-model="state.dataForm2.fieldValue" dict-type="person_level"
              placeholder="请选择"></ren-select>
              <ren-select  v-else-if="state.dataForm2.field=='responsibility'" v-model="state.dataForm2.fieldValue" dict-type="responsibility"
              placeholder="请选择"></ren-select>
              <ren-select  v-else-if="state.dataForm2.field=='work_nature'" v-model="state.dataForm2.fieldValue" dict-type="work_nature"
              placeholder="请选择"></ren-select>
              <ren-select  v-else-if="state.dataForm2.field=='tag2'" v-model="state.dataForm2.fieldValue" dict-type="tag2"
              placeholder="请选择"></ren-select>
              <el-input  v-else-if="state.dataForm2.field=='tag1'" v-model="state.dataForm2.fieldValue"
              type="text" placeholder="请输入" clearable></el-input>
              <ren-select  v-else-if="state.dataForm2.field=='contact_category'" v-model="state.dataForm2.fieldValue" dict-type="contact_category"
              placeholder="请选择"></ren-select>
              <el-input  v-else-if="state.dataForm2.field=='remark'" v-model="state.dataForm2.fieldValue" dict-type="remark"
              type="text" placeholder="请输入" clearable></el-input>
            <ren-select  v-else  v-model="state.dataForm2.fieldValue"  placeholder="请选择">  </ren-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <div style="margin-left: 20px;">
            <el-button type="primary" @click="operationSubmit"  :disabled="state.multiple" >确定</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="1">
          <el-checkbox v-model="state.dataForm.checkAll" @change="chanckAll">全选</el-checkbox>
        </el-col>
        <el-col :span="2.5">
          <el-button @click="replacePersonnel()" :disabled="state.multiple">替换人员数据筐</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button @click="joinPersonnel()" :disabled="state.multiple">加入人员数据筐</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button @click="deletePersonnel()" :disabled="state.multiple">人员数据筐中移除</el-button>
        </el-col>
        <!-- <el-col :span="2.5">
          <el-button @click="handleAuthority()" :disabled="state.multiple">设置标签分类</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button @click="hanleUnlabeling()" :disabled="state.multiple">取消标签分类</el-button>
        </el-col> -->
        <el-col :span="2.5">
          <el-button @click="addOrUpdateHandle()" :disabled="state.multiple">加入任务</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button @click="addBlacklist()" :disabled="state.multiple">加入黑名单</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button type="primary" @click="toggleListVisibility()">返回</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button v-if="state.hasPermission('crm:crmperson:delete')" type="danger"  @click="state.deleteHandle()" :disabled="state.multiple">{{ $t("deleteBatch") }}</el-button>
        </el-col>
      </el-row>
      <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec', 'whiteSpace': 'nowrap' }"
         v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%;margin-top: 15px;">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column align="center" prop="name" label="姓名" min-width="50" type="primary">
          <template v-slot="scope">
            <el-link  :underline="false" type="primary" @click="userHandle(scope.row.id)">{{ scope.row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="company" label="公司"></el-table-column>
        <el-table-column align="center" prop="mobile" label="手机1"  min-width="60"></el-table-column>
        <el-table-column align="center" prop="mobile2" label="手机2" min-width="60"></el-table-column>
        <el-table-column align="center" prop="tel" label="电话1" min-width="60"></el-table-column>
        <el-table-column align="center" prop="tel2" label="电话2" min-width="60"></el-table-column>
        <el-table-column align="center" prop="position" label="职务" min-width="40"></el-table-column>
        <el-table-column align="center" prop="email" label="邮箱"  ></el-table-column>
        <el-table-column align="center" prop="city" label="城市"  min-width="40"></el-table-column>
        <el-table-column align="center" prop="lrdLastLinkTime" label="最后联络时间" ></el-table-column>
        <el-table-column align="center" prop="updateTime" label="修改时间"  ></el-table-column>
        <el-table-column align="center" prop="realName" label="修改人" min-width="40"></el-table-column>
      </el-table>
    </el-form>
    <el-pagination :current-page="state.page" :page-sizes="[15, 25, 50, 100]" :page-size="state.limit"
      :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle">
    </el-pagination>
    <!-- 弹窗加入任务 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList" :psnIdList='state.dataForm'
      :checkAll='state.dataForm.checkAll' :condition='state.dataForm'></add-or-update>
    <!-- 设置标签 -->
    <tag ref="exhibitionPowerRef" @refreshDataList="state.getDataList" :psnIdList='state.dataForm'
      :checkAll='state.dataForm.checkAll' :condition='state.dataForm'></tag>
    <!-- 新建收藏夹 -->
    <favorites ref="newFavorite" @refreshDataList="getCollectList"></favorites>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import { ElMessage } from "element-plus";
import baseService from "@/service/baseService";
import { useRouter } from 'vue-router'
import AddOrUpdate from "./join-tasks.vue";
import tag from "./custom-tags.vue";
import favorites from "./favorites-list-add-or-update.vue";
import exhibition from "./current-exhibition-add.vue";
const view = reactive({
  getDataListURL: '/crm/crmperson/queryLinkTaskPage',
  getDataListIsPage: true,
  daterange: null,
  dataForm: {
    linkBTime: null as number | null,//开始时间
    linkETime: null as number | null,//结束时间
    id: "",
    sftId: "",
    linkResult: "",//联络结果
    linkMinTime: "",//联络时长
    linkMaxTime: "",//联络时长大
    tskIdList: "",
    unifyRank: "",
    checked: "",
    dataBox: "",//人员数据筐
    psnIdList: '' as any,
    psnIds: "",//收藏夹人员id
    dfvName: "",//收藏夹名
    dfvId: "",//收藏夹id
    checkAll: false as any,//全选
    exhsNameStr: "",
  },
  tskIdArr: [] as any[],

  dataForm2: {
    type: 0,
    field: "",
    fieldValue: "",
    psnIds: [] as any[],//收藏夹人员id
    sourceIdList: [] as any[],
    userIds: [] as any[],
    psnldListStr: [] as any[],
  },
  dataForm3: {
    id: "",
    name: "",//人员姓名
    exhName: "",
    department: "",//部门
    tel: "",//电话
    mobile: "",//手机
    wechat: '',//微信
    company: "",//公司
    position: "",
    address: "",//地址
    type: "",//人员类别
    exhId: "",//展会id
    pjpType: "",//	参会类别
    level: '',//人员级别
    unifyDept: "",//工作性质
    unifyRank: "",//岗位职责
    epjName: "",//展会项目名
    trade: "",//行业
    extField1: '',//标签一
    extField2: "",//标签二
    resource: "",//来源
    remark: "",//备注
    country: "",//国家
    province: "",//省
    city: "",//城市
    condition: "",
  },
  dataForm4: {
  },

});



//初始化
const init = () => {
  getresultleader();
  getoperatorList();
  //收藏夹列表
  getCollectList();
  getInfo();
};

const isListVisible = ref(false);

/**
 * 获取当前登录用户信息，当前展会
 */
const getInfo = () => {
  baseService.get("/sys/user/info").then((res) => {
    if (res.data.exhsNameStr == "" || res.data.exhsNameStr == null) {
      alert("请先设置当前展会");
    }
    Object.assign(state.dataForm, res.data);
  });
}

//返回上一页
const toggleListVisibility = () => {
  isListVisible.value = !isListVisible.value;
};

// 点击全选按钮
const chanckAll = () => {
  state.multiple = !state.dataForm.checkAll
}

/**
 * 查询按钮
 */
const baseQuery = () => {
  isListVisible.value = !isListVisible.value;
  // 联络任务获取id
  state.dataForm.tskIdList = state.tskIdArr ? state.tskIdArr.join(",") : '';
  // 重新获取数据列表
  state.getDataList();
};

const taskleader = ref([] as any[]);

/**
 * 联络结果-全选
 * @param val
 */
const handleCheckAllChange = (val: boolean) => {
  // 选中
  if (val) {
    for (let i = 0; i < taskleader.value.length; i++) {
      state.tskIdArr.push(taskleader.value[i].id);
    }
  } else {
    state.tskIdArr = [];
  }
}

/**
 * 获取任务
 */
const getresultleader = () => {
  return baseService.get("/crm/crmtask/list").then((res) => {
    if (res.code !== 0) {
      return ElMessage.error(res.msg);
    }
    taskleader.value = res.data;
    console.log(taskleader.value)
  });
};


/**
 *操作人员列表
 */
const operatorList = ref<any[]>([]);
const getoperatorList = () => {
  return baseService.get("/sys/user/usersByType/4").then((res) => {
    operatorList.value = res.data;
  });
};

/**
 * 跳转人员查询详情页面
 */
const router = useRouter();
const userHandle = (row: any) => {
  router.push({
    path: "/expocube/personnel-information-details",
    query: {
      id: row,
    }
  });
};

/**
 *收藏夹列表
 */
const collectList = ref<any[]>([]);
const getCollectList = () => {
  return baseService.get("/crm/crmdatafavorite/getByStufId").then((res) => {
    collectList.value = res.data;
  });
};



/**
 * 个人收藏加入
 */
const collectAdd = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.psnIds = ids;
  state.dataForm2.psnIds = state.dataForm2.psnIds.map((item: number) => Number(item)); // 转换psnIds中的字符串为数字
  return baseService.post("/crm/crmdatafavoritedetail/addFavorite", { dfvId: state.dataForm.dfvId, psnIds: state.dataForm2.psnIds }).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("收藏夹加入成功");
    }
  });
};

/**
 * 个人收藏移除
 */
const collectDelete = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.psnIds = ids;
  state.dataForm2.psnIds = state.dataForm2.psnIds.map((item: number) => Number(item));
  return baseService.delete("/crm/crmdatafavoritedetail/deleteFavorite", { dfvId: state.dataForm.dfvId, psnIds: state.dataForm2.psnIds }).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("收藏夹移除成功");
    }
  });
};

/**
 * 新建收藏夹
 */
const newFavorite = ref();
const handleFavorite = () => {
  nextTick(() => {
    newFavorite.value.init(state.dataForm);
  });
}


/**
 * 替换人员数据筐
 */
const replacePersonnel = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.sourceIdList = ids;
  state.dataForm2.sourceIdList = state.dataForm2.sourceIdList.map((item: number) => Number(item));
  return baseService.put("/crm/crmuserdatabox/replaceBox", { checkAll: state.dataForm.checkAll, condition: state.dataForm3, sourceIdList: state.dataForm2.sourceIdList }).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("替换人员数据筐成功");
    }
  });
}

/**
 * 加入人员数据筐
 */
const joinPersonnel = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.sourceIdList = ids;
  state.dataForm2.sourceIdList = state.dataForm2.sourceIdList.map((item: number) => Number(item));
  return baseService.post("/crm/crmuserdatabox/addBox", { checkAll: state.dataForm.checkAll, condition: state.dataForm3, sourceIdList: state.dataForm2.sourceIdList }).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("加入人员数据筐成功");
    }
  });
}

/**
 * 人员数据筐移除
 */
const deletePersonnel = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.sourceIdList = ids;
  state.dataForm2.sourceIdList = state.dataForm2.sourceIdList.map((item: number) => Number(item));
  return baseService.delete("/crm/crmuserdatabox/removeBox", { checkAll: state.dataForm.checkAll, condition: state.dataForm3, sourceIdList: state.dataForm2.sourceIdList }).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("移除人员数据筐成功");
    }
  });
}

/**
 * 取消标签分类
 */
const hanleUnlabeling = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.psnldListStr = ids;
  state.dataForm2.psnldListStr = state.dataForm2.psnldListStr.map((item: number) => Number(item));
  return baseService.get("/crm/crmbasetag/getSelectedList", { psnldListStr: state.dataForm2.psnldListStr.join() }).then((res: any) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("取消标签分类成功");
    }
  });
}

/**
 * 加入黑名单
 */
const addBlacklist = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm4 = ids;
  return baseService.put("/crm/crmperson/addBlacklist", state.dataForm4).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("加入黑名单成功");
    }
  });
}

/**
 * 操作类型后的确认
 */
const operationSubmit = () => {
  // //todo 获取选中的userIds
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm2.userIds = ids;
  state.dataForm2.userIds = state.dataForm2.userIds.map((item: number) => Number(item));
  return baseService.put("/crm/crmperson/batchOperation", { type: Number(state.dataForm2.type), field: state.dataForm2.field, fieldValue: state.dataForm2.fieldValue, checkAll: state.dataForm.checkAll, userIds: state.dataForm2.userIds, condition: state.dataForm3 }).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("操作成功");
    }
  });
}

//设置标签分类弹窗
const exhibitionPowerRef = ref();
const handleAuthority = (id?: number) => {
  nextTick(() => {
    let ids: string[] = [];
    for (let i = 0; i < state.dataListSelections!.length; i++) {
      ids.push(state.dataListSelections![i].id);
    }
    state.dataForm2.sourceIdList = ids;
    state.dataForm2.sourceIdList = state.dataForm2.sourceIdList.map((item: number) => Number(item));
    console.log(state.dataForm2);
    exhibitionPowerRef.value.init(id, state.dataForm2.sourceIdList);
  });
}

//当前展会
const currentExhibition = ref();
const handlexhibition = (id?: number) => {
  nextTick(() => {
    currentExhibition.value.init(id);
  });
}


//加入任务弹窗户
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;

  nextTick(() => {
    let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm.psnIdList = ids;
  state.dataForm.psnIdList = state.dataForm.psnIdList.join('');
    addOrUpdateRef.value.init(id, state.dataForm, state.dataForm.checkAll, state.dataForm3);
  });
};

const state = reactive({ ...useView(view), ...toRefs(view) });

watch(
  () => state.daterange,
  (val: number[] | null) => {
    if (val === null) {
      state.dataForm.linkBTime = null;
      state.dataForm.linkETime = null;
    } else {
      state.dataForm.linkBTime = val[0];
      state.dataForm.linkETime = val[1];
    }
  }
);

//页面进入执行
init();

</script>

<style lang="scss" scoped>
.select {
  width: 800px;
  margin-top: -15px;
  margin-left: 30px;
}

.message {
  font-size: 16px;
  font-weight: 600;
  float: left;
}

.el-button {
  margin-right: 10px;
}

.exhibition {
  float: right;
  font-size: 16px;
  padding-left: 20px;
  width: 305px;
  height: 49px;
  line-height: 49px;
  border-radius: 27px;
  background-color: rgba(247, 247, 247, 1);
}
::v-deep .el-table .cell {
  white-space: nowrap;
  font-size: 13px;
  height: 18px;
  line-height: 18px;
}
.el-form-item::v-deep {
  .el-checkbox-group {
    .el-checkbox {
      width: 150px;
    }
  }
}

</style>
